<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../css/test.css" type="text/css" media="screen"/>
    <meta charset="UTF-8">
    <title>Add new account</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script th:inline="none">
        $(function () {
            $("#password").blur(function () {
                var password = $("#password").val();
                var check = document.getElementById("checkPassword");
                var judge = /^\w{5,12}$/;

                if (judge.test(password)) {
                    check.innerHTML = "<font color='green'>legal</font>"
                } else {
                    check.innerHTML = "<font color='red'>illegal</font>"
                }
            });
        })


        function checked(e) {
            const username = $("#username").val();
            const password = $("#password").val();
            const repeatPassword = $("#repeatPassword").val();
            const firstname = $("#firstname").val();
            const lastname = $("#lastname").val();
            const phone = $("#phone").val();
            const address1 = $("#address1").val();
            const address2 = $("#address2").val();
            const city = $("#city").val();
            const state = $("#state").val();
            const country = $("#country").val();
            const zip = $("#zip").val();
            if (username == null || username === '' || username === undefined) {
                alert("Please enter your username!");
                return false;
            } else if (password == null || password === '' || password === undefined) {
                alert("Please enter your password!");
                return false;
            } else if (repeatPassword == null || repeatPassword === '' || repeatPassword === undefined) {
                alert("Please repeat your password!");
                return false;
            } else if (password !== repeatPassword) {
                alert("The twice password are different!")
                return false;
            } else if (firstname == null || firstname === '' || firstname === undefined) {
                alert("Please enter your firstname!");
                return false;
            } else if (lastname == null || lastname === '' || lastname === undefined) {
                alert("Please enter your lastname!");
                return false;
            } else if (phone == null || phone === '' || phone === undefined) {
                alert("Please enter your phone!");
                return false;
            } else if (address1 == null || address1 === '' || address1 === undefined) {
                alert("Please enter your first address!");
                return false;
            } else if (address2 == null || address2 === '' || address2 === undefined) {
                alert("Please enter your second address!");
                return false;
            } else if (city == null || city === '' || city === undefined) {
                alert("Please enter city!");
                return false;
            } else if (state == null || state === '' || state === undefined) {
                alert("Please enter your state!");
                return false;
            } else if (zip == null || zip === '' || zip === undefined) {
                alert("Please enter your zip!");
                return false;
            } else if (country == null || country === '' || country === undefined) {
                alert("Please enter country!");
                return false;
            }
        }
    </script>

</head>
<body>
<div th:replace="common/top"></div>
<section class="content">
    <main>
        <div class="container">

                <div align="right"><a href="/account/viewAccounts" class="btn-close">give up adding</a></div>

                <form action="/account/addAccount" method="post" id="form" onsubmit="return checked(this)">

                    <section class="section">
                        <h4>User Information</h4>
                        <div class="field is-horizontal">
                            <div class="field-label">
                                <label class="label" for="username">UserName</label></div>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input class="input" type="text" id="username" name="username">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label for="password" class="label">New password</label>
                            </div>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input class="input" type="password" id="password" name="password">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label for="repeatPassword" class="label">Repeat password</label>
                            </div>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input class="input" type="password" id="repeatPassword" name="repeatPassword">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>

                    <section class="section">
                        <h4>Account Information</h4>

                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label for="firstname" class="label">First name:</label>
                            </div>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input class="input" type="text" name="firstname" id="firstname">
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label for="lastname" class="label">Last name:</label>
                            </div>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input class="input" type="text" name="lastname" id="lastname">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label for="email" class="label">Email:</label>
                            </div>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input class="input" type="text" name="email" id="email">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label for="phone" class="label">Phone:</label>
                            </div>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input class="input" type="text" name="phone" id="phone">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label for="address1" class="label">Address 1:</label>
                            </div>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input class="input" type="text" name="address1" id="address1">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label for="address2" class="label">Address 2:</label>
                            </div>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input class="input" type="text" name="address2" id="address2">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label for="city" class="label">City:</label>
                            </div>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input class="input" type="text" name="city" id="city">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label for="state" class="label">State:</label>
                            </div>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input class="input" type="text" name="state" id="state">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label for="zip" class="label">Zip:</label>
                            </div>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input class="input" type="text" name="zip" id="zip">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label for="country" class="label">Country:</label>
                            </div>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input class="input" type="text" name="country" id="country">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>

                    <section class="section">
                        <h4>Profile Information</h4>
                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label class="label">Language: </label>
                            </div>
                            <div class="field-body">
                                <div class="field is-narrow">
                                    <div class="control">
                                        <div class="select is-fullwidth">
                                            <select name="languagePreference">
                                                <option value="Chinese">
                                                    Chinese
                                                </option>
                                                <option value="English">
                                                    English
                                                </option>
                                                <option value="French">
                                                    French
                                                </option>
                                                <option value="Russian">
                                                    Russian
                                                </option>
                                                <option value="Arabic">
                                                    Arabic
                                                </option>
                                                <option value="German">
                                                    German
                                                </option>
                                                <option value="Japanese">
                                                    Japanese
                                                </option>
                                                <option value="Spanish">
                                                    Spanish
                                                </option>
                                                <option value="Portuguese">
                                                    Portuguese
                                                </option>
                                                <option value="Hindi">Hindi</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label class="label">Favourite Category:</label>
                            </div>
                            <div class="field-body">
                                <div class="field is-narrow">
                                    <div class="control">
                                        <div class="select is-fullwidth">
                                            <select name="favouriteCategoryId">
                                                <option value="Fish">
                                                    Fish
                                                </option>
                                                <option value="Dogs">
                                                    Dogs
                                                </option>
                                                <option value="Reptiles">
                                                    Reptiles
                                                </option>
                                                <option value="Cats">
                                                    Cats
                                                </option>
                                                <option value="Birds">
                                                    Birds
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="field is-horizontal">
                            <div class="field-label">
                                <label for="listOption" class="label">Enable List</label>
                            </div>
                            <div class="field-body">
                                <div class="field is-narrow">
                                    <div class="control">
                                        <input type="checkbox" id="listOption" name="listOption" value="listOption">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="field is-horizontal">
                            <div class="field-label">
                                <label for="BannerOption" class="label">Enable Banner</label>
                            </div>
                            <div class="field-body">
                                <div class="field is-narrow">
                                    <div class="control">
                                        <input type="checkbox" id="BannerOption" name="BannerOption"
                                               value="BannerOption">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="field-body">
                            <div class="field">
                                <div class="control">
                                    <button class="button is-primary" type="submit" name="editAccount" id="submit">
                                        Save
                                    </button>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!--                        <input id="submit" type="submit" name="editAccount" value="Save" class="button">-->
                </form>

            </div>
    </main>
</section>

<div th:replace="common/bottom"></div>
</body>
</html>